<template>
  <div class="search-suggest">
    <van-cell
      @click="$emit('changsuggest', item)"
      v-for="(item, index) in suggestData"
      :key="index"
      icon="search"
    >
      <div slot="title" v-html="gettext(item)"></div>
    </van-cell>
  </div>
</template>

<script>
// 搜索建议 防抖 发送请求 从父组件中接收value
export default {
  props: {
    searchvalue: {
      type: String,
      default: ""
    },
    suggestData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    gettext(text) {
      // var reg = new RegExp(this.searchvalue, "gi");
      // var str = `<span class="red">${this.searchvalue}<span>`;
      // console.log(text.replace(reg, str));
      // return text.replace(reg, str);

      var reg = new RegExp(this.searchvalue, "gi");
      // str.replace(规则,将要替换的值)
      return text.replace(
        reg,
        `<span style="color:pink">${this.searchvalue}</span>`
      );
    }
  }
};
</script>
<style scoped lang="less">
/deep/.red {
  color: red;
}
</style>
